<div class="xf-list-check {$class_row|default='mb-3'}">
  <div class="position-relative w-100">
    <label class="{$class_label|default='form-label'}" for="{$name}">{$title}</label>
    <input class="dropdown-toggle {$class_input|default='form-control form-select form-select-sm'}" type="text" id="{$id}" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" readonly value="{:implode(xfArrayFilter($option,$value),',')}">
    <div class="dropdown-menu px-3 pt-2 pb-3">
      <div class="row row-cols-auto">
        {volist name="$option" id="itemValue" key="i"}
        <div class="col small pt-1">
          <input class="form-check-input" name="{$name}[]" id="{$id}{$i}" type="checkbox" value="{$key}" data-label="{$itemValue}" {in name="key" value="$value"}checked{/in}>
          <label class="form-check-label text-truncate" for="{$id}{$i}" style="max-width: 80%;">{$itemValue}</label>
        </div>
        {/volist}
        {if $url}
        <div class="col-12 pt-2">
          <div class="input-group input-group-sm">
            <input type="text" class="form-control">
            <button class="btn btn-secondary" type="button" data-url="{$url}">新增</button>
          </div>
        </div>
        {/if}
      </div>
    </div>
  </div>
  {if $tips}<div class="{$class_tips|default='form-text'}">{$tips}</div>{/if}
</div>